<template>
  <view class="doctor-detail-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="iconfont icon-back"><</text>
      </view>
      <text class="title">医生详情</text>
    </view>

    <!-- 医生信息 -->
    <view class="doctor-info" v-if="doctor">
      <image class="avatar" :src="doctor.avatar || '/static/temp/doctor-avatar.png'" mode="aspectFill"></image>
      <view class="info-content">
        <view class="name-title">
          <text class="name">{{ doctor.name }}</text>
          <text class="title">{{ doctor.title }}</text>
        </view>
        <text class="hospital">{{ doctor.hospitalName }} - {{ doctor.departmentName }}</text>
        <view class="tags">
          <text class="tag">擅长</text>
          <text class="expertise">{{ doctor.expertise || '暂无信息' }}</text>
        </view>
      </view>
    </view>

    <!-- 患者咨询信息 -->
    <view class="consultation-section" v-if="consultations && consultations.patientQuestion">
      <text class="section-title">患者咨询</text>
      <view class="consultation-item">
        <text class="question">{{ consultations.patientQuestion }}</text>
      </view>
    </view>

    <!-- 医生评价信息 -->
    <view class="evaluation-section" v-if="evaluations && evaluations.evaluationRating">
      <text class="section-title">医生评价</text>
      <view class="evaluation-item">
        <text class="rating">评分: {{ evaluations.evaluationRating }}※</text>
        <text class="content">{{ evaluations.evaluationContent }}</text>
      </view>
    </view>

    <!-- 互动按钮 -->
    <view class="actions">
      <button class="consult-btn" @click="startConsultation">向医生提问</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doctorId: null,
      doctor: null,
      consultations: {},
      evaluations: {}
    };
  },

  onLoad(options) {
    if (options.id) {
      this.doctorId = options.id;
      this.fetchDoctorDetails();
      this.fetchConsultations();
      this.fetchEvaluations();
    }
  },

  methods: {
    goBack() {
      uni.navigateBack();
    },

    // 获取医生详情
    async fetchDoctorDetails() {

        uni.showLoading({ title: '加载中...' });
        const [err, res] = await uni.request({
          url: `http://localhost:8080/app/doctor/getDoctorById?id=${this.doctorId}`,
          method: 'GET'
        });
      uni.hideLoading();

        if (!err && res.data.code === 200) {
          this.doctor = res.data.data;
        } else {
          uni.showToast({ title: '获取医生信息失败', icon: 'none' });
        }
    },

    // 获取患者咨询列表
    async fetchConsultations() {
      const [err, res] = await uni.request({
        url: `http://localhost:8080/app/doctor/getPatientConsultation?doctorId=${this.doctorId}`,
        method: 'GET'
      });

      uni.hideLoading();

      if ( res.data.code === 200) {
        // 假设 res.data.data 是一个对象，将其中的咨询数据提取出来
        this.consultations = res.data.data ;
      } else {
        uni.showToast({ title: '获取患者咨询失败', icon: 'none' });
      }
    },

// 获取医生评价列表
    async fetchEvaluations() {
      const [err, res] = await uni.request({
        url: `http://localhost:8080/app/doctor/getDoctorEvaluation?doctorId=${this.doctorId}`,
        method: 'GET'
      });
      uni.hideLoading();


      if (res.data.code === 200) {
        // 假设 res.data.data 是一个对象，将其中的评价数据提取出来
        this.evaluations = res.data.data ;
      } else {
        uni.showToast({ title: '获取医生评价失败', icon: 'none' });
      }
    },

    startConsultation() {
      uni.navigateTo({
        url: `/pages/inquiry/question?id=${this.doctorId}`
      });
    }
  }
};
</script>

<style lang="scss">
.doctor-detail-page {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 24upx;

  .header {
    display: flex;
    align-items: center;
    padding: 20upx;
    background: #fff;
    box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.05);

    .back-btn {
      font-size: 32upx;
      color: #333;
      padding-right: 20upx;
    }

    .title {
      font-size: 32upx;
      font-weight: bold;
      flex: 1;
      text-align: center;
    }
  }

  .doctor-info {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 30upx;
    margin-top: 20upx;
    border-radius: 12upx;
    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.05);

    .avatar {
      width: 100upx;
      height: 100upx;
      border-radius: 50%;
      margin-right: 20upx;
      border: 3upx solid #00c4b4;
    }

    .info-content {
      flex: 1;

      .name-title {
        display: flex;
        align-items: center;

        .name {
          font-size: 36upx;
          font-weight: bold;
          margin-right: 10upx;
        }

        .title {
          font-size: 28upx;
          color: #777;
        }
      }

      .hospital {
        font-size: 26upx;
        color: #999;
        margin-top: 5upx;
      }

      .tags {
        margin-top: 8upx;
        font-size: 24upx;
        display: flex;
        align-items: center;

        .tag {
          background: #00c4b4;
          color: #fff;
          padding: 4upx 12upx;
          border-radius: 6upx;
          margin-right: 8upx;
          font-size: 22upx;
        }

        .expertise {
          color: #555;
        }
      }
    }
  }

  .section-title {
    font-size: 30upx;
    font-weight: bold;
    margin: 30upx 0 20upx;
    color: #333;
  }

  .consultation-section,
  .evaluation-section {
    background: #ffffff;
    padding: 24upx;
    border-radius: 12upx;
    box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.05);
    margin-bottom: 20upx;

    .consultation-item,
    .evaluation-item {
      padding: 16upx 0;
      border-bottom: 1px solid #eee;
      font-size: 26upx;

      &:last-child {
        border-bottom: none;
      }

      .question {
        display: block;
        color: #555;
        margin-top: 6upx;
      }

      .rating {
        font-weight: bold;
        color: #ff9900;
        font-size: 28upx;
      }

      .content {
        color: #666;
        margin-top: 6upx;
      }
    }
  }

  .actions {
    margin: 30upx 0;
    text-align: center;

    .consult-btn {
      background: linear-gradient(45deg, #00c4b4, #009688);
      color: #fff;
      font-size: 36upx;
      padding: 20upx 60upx;
      border-radius: 50upx;
      border: none;
      box-shadow: 0 4upx 10upx rgba(0, 196, 180, 0.3);
      transition: all 0.3s;
      text-align: center;
      display: flex;
      justify-content: center;
      line-height: 1;
      margin: 20upx;

      &:hover {
        background: linear-gradient(45deg, #009688, #00796b);
        box-shadow: 0 6upx 15upx rgba(0, 150, 136, 0.4);
      }
    }
  }
}

</style>
